<template>
  <div class="page-container">
    <el-form
      ref="dataForm"
      label-width="120px"
      label-position="right"
      class="fit-form"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="视图编码" prop="code">
            <el-input v-model="formData.code" :disabled="true" placeholder="系统自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视图名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目录名称" prop="folderId">
            <ac-tree
              v-model="formData.folderId"
              dataUrl="/system/viewFolder/queryTree"
              :leafSelect="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视图来源" prop="source">
            <ac-radio v-model="formData.source" options="内置,数据源"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.source === '数据源'">
          <el-form-item label="数据源" prop="datasourceId">
            <ac-remote-select
              v-model="formData.datasourceId"
              dataUrl="/system/datasource/queryPage"
              :option="{id: formData.datasourceId, name: formData.datasourceName}"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="fit-form-row">
        <el-col :span="24" class="fit-form-col">
          <el-form-item label="语句" prop="sqlText" class="fit-form-item">
            <ac-code v-model="formData.sqlText" :title="formData.name" mode="text/x-sql"></ac-code>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import api from '@/http/api';
import loading from '@/utils/loading';

const emit = defineEmits(['afterSubmit'])
const props = defineProps({
  options: Object
});

const dataForm = ref();
const formData = ref({});
const rules = ref({
  name: [
    {required: true, message: '请输入视图名称', trigger: ['blur', 'change']},
    {max: 100, message: '视图名称长度最多只能是100个字符', trigger: ['blur', 'change']}
  ],
  folderId: [
    {required: true, message: '请选择目录名称', trigger: ['change', 'blur']},
  ],
});

const submitData = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm("请确认是否提交？", "提示", { type: "info" }).then(() => {
        api.post('/system/view/save', formData.value)
          .then((res) => {
            ElMessage.success(res.message);
            emit('afterSubmit', res.data)
          }).catch(() => {
        });
      }).catch(() => {});
    } else {
      ElMessage.error("数据录入不正确，请重新检查！");
    }
  });
};

const loadData = (options) => {
  if (!options.id) {
    formData.value = Object.assign({source: '内置'}, options);
    return;
  }

  loading.showLoading();
  api.post('/system/view/queryBy', {id: options.id}).then(res => {
    formData.value = res.data || {};
    loading.hideLoading();
  }).catch(() => loading.hideLoading());
};

watch(() => props.options, val => {
  loadData(val);
});

onMounted(() => {
  loadData(props.options);
});

defineExpose({ submitData });
</script>

<style scoped lang="scss">
.page-container {
  width: auto;
  margin-right: 90px;
  .el-form {
    margin-top: 20px;
  }
}
.title {
  display: flex;
  flex-direction: row;
  margin-right: 10px;
  height: 40px;
  align-items: center;

  .title-content {
    flex-grow: 1;
    font-size: 18px;
  }

  .title-button .title-button-box {
    height: 30px;
    width: 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }

  .title-button .title-button-box:hover {
    background: #eaeaea;
    border: none;
  }

  .title-button .title-button-box:focus-visible {
    outline: unset;
  }
}

.filter-box {
  margin-right: 10px;
}

.tree :deep(.el-tree-node__content) {
  height: 40px;
}

.page-aside-grow {
  width: 100% !important;

  :deep(.el-tree) {
    display: flex;
    flex-direction: column;
    width: 1px !important;
  }

  :deep(.el-tree-node) {
    display: flex;
    flex-direction: column;
    width: 100% !important;
  }

  :deep(.el-tree-node__content) {
    display: flex;
    flex-grow: 1;
  }
}

.node-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;

  .node-label {
    margin-left: 10px;
    flex-grow: 1;
    width: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;

    > span {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .node-button {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .node-button .node-button-item {
    height: 30px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .node-button .node-button-item:focus-visible {
    outline: unset;
  }
}
:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
  background-color: #f5f7fa!important;
}
:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
  background-color: #ecf5ff!important;
}
.node-item:hover {
  .node-button .node-button-item:hover {
    background: #eaeaea;
  }
}
</style>